<template>
  <div class="ic-menu-bar">
    <template v-if="module === 'console'">
      <console-menu />
    </template>
    <template v-if="module === 'monitor'">
      <monitor-menu />
    </template>
    <template v-if="module === 'maintain'">
      <maintain-menu />
    </template>
    <template v-if="module === 'settings'">
      <settings-menu />
    </template>
  </div>
</template>
<script lang="ts">
import { State } from 'vuex-class'
import { Vue, Component } from 'vue-property-decorator'

import ConsoleMenu from './ConsoleMenu.vue'
import MonitorMenu from './MonitorMenu.vue'
import MaintainMenu from './MaintainMenu.vue'
import SettingsMenu from './SettingsMenu.vue'

@Component({
  components: {
    ConsoleMenu,
    MonitorMenu,
    MaintainMenu,
    SettingsMenu
  }
})
export default class MenuBar extends Vue {
  @State('module', { namespace: 'app' })
  private module!: string
}
</script>
